<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工表</title>
    <style>
        table,tr,th,td{
            text-align: center;
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px 10px;
        }
        #edit{
            height: 250px;
            width: 500px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>depar</th>
                <th>工资</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <script id="emps" type="text/html">
                {{each $data item index}}
                <tr>
                    <td>{{item._id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.department}}</td>
                    <td>{{item.salary}}</td>
                    <td>
                        <button onclick="getOne('{{item._id}}')">修改</button>
                        <button onclick="deleteman('{{item._id}}')">删除</button>
                    </td>
                </tr>
                {{/each}}

            </script>
            
        </tbody>
    </table>
    <hr>
    <div id="edit">
        <h2 id="text">添加员工信息</h2>
        <p>编号：<input id="_id" value="添加不需要填写" readonly></p>
        <p>姓名：<input type="text" id="name"></p>
        <p>年龄：<input type="text" id="age"></p>
        <p>性别：
            <input type="radio" name="sex" id="man" value="男" checked>男
            <input type="radio" name="sex" id="woman" value="女">女
        </p>
        <p><button type="submit" id="btn">提交</button>
            <button type="reset" id="cancel">取消</button>
        </p>
    </div>
    <script src="../web/js/jquery.js"></script>
    <script src="../web/js/artTemplate.js"></script>
    <script>
        function loadData(){
            $.get('http://localhost:1115/getAllemployees',function(res){
                let html = template('emps',res)
                document.querySelector('#tbody').innerHTML = html
            })
        }
        loadData()
        
        // 定义清空数据的方法
        function clear(){
            document.querySelector('#_id').value = ''
            document.querySelector('#name').value = ''
            document.querySelector('#age').value =''
            document.querySelector('#man').checked =true
        }
        // 给取消按钮注册点击事件
        document.querySelector('#cancel').onclick = function(){
            clear()
            document.querySelector('#text').innerHTML = '添加员工信息'
        }
        // 提交按钮的注册事件
        document.querySelector('#btn').onclick = function(){
            let name = document.querySelector('#name').value
            let age = document.querySelector('#age').value
            let sex = document.querySelector('#man').checked ? '男':'女'
            let parmas = {
                name,age,sex
            }

            // 定义提交按钮默认是添加
            let url = 'http://localhost:1115/addAllemployees'
            if(document.querySelector('#text').innerHTML === '修改员工信息'){
                url = 'http://localhost:1115/updateemployees'
                // 注意：修改信息一定要输入id值，所以一定要设置一个input放置获取信息的id
                parmas._id = document.querySelector('#_id').value
            }

            $.post(url,parmas,function(res){
                // 调用数据的方法
                console.log(res);
                if(document.querySelector('#text').innerHTML === '添加员工信息'){
                    clear()
                }
                loadData()
               
            })
        }

        // 删除员工
        function deleteman(_id){
            if(confirm('是否确定删除')){
                $.post('http://localhost:1115/deleteemployees',{_id},function(res){
                    console.log(res);
                    loadData()
                })
            }
        }
        // 修改员工信息,根据id查询到员工信息进行修改,修改按钮的点击事件
        function getOne(_id){
            document.querySelector('#text').innerHTML = "修改员工信息"
            $.get('http://localhost:1115/getOneemployees',{_id},function(res){
                console.log(res);
                document.querySelector('#_id').value = res._id
                document.querySelector('#name').value = res.name
                document.querySelector('#age').value = res.age
                if(res.sex ==='男'){
                    document.querySelector('#man').checked = true
                }else{
                    document.querySelector('#woman').checked = true
                }
            })
        }

    </script>
</body>
</html>